<template>
  <div class="box">
    <header class="header">
      <van-search
        v-model="topicValue"
        shape="round"
        placeholder="搜索更多话题"
        @cancel="$router.go(-1)"
        show-action
      />
    </header>
    <div class="content">
      <ul class="topic-list">
        <li v-for="(item, index) of topicList" :key="index">
          <span @click="checkTopic(item)">{{ item }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'vant'
import Bus from '@/utils/bus.js'

Vue.use(Search)

export default {
  data () {
    return {
      topicValue: '',
      topicList: ['不参与话题', '#五一放肆嗨', '#五月请对我好一点', '#四月你透支了吗']
    }
  },
  methods: {
    checkTopic (addTopic) {
      Bus.$emit('addTopic', addTopic)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/topic.scss';
</style>
